<template>
  <div class="shopping">
    <div class="shop-nav clearfix"><span class="tt">{{name}}的购物清单</span> </div>
    <div class="have-shop" v-if="haveshop">
      <div class="list-box">
        <div class="li clearfix" v-for="(item,index) in products" >
          <div class="fc-div clearfix">
            <a v-on:click="redirect('/shop/details/'+item.product_id)">
              <div class="left img">
                <img :src="item.thumb" alt="">
              </div>
              <div class="left font">
                <div class="a-tt">{{item.name}}</div>
                <div class="a-pr">{{item.price}}</div>
              </div>
            </a>
          </div>
          <div class="fr-div">
            x1
          </div>
        </div>
      </div>

    </div>
    <div class="no-have-shop" v-if="!haveshop">
      <div class="no-box">
        <div>您的购物袋中还没有商品！</div>
        <div class="btn-box">
          <a href="#" class="go-btn">再去逛逛</a>
        </div>
      </div>

    </div>
  </div>
</template>


<script>
  import { Toast } from 'mint-ui';
  import footGuide from '../../components/footGuide'

  export default {
    name: 'Shopping',
    data () {
      return {
        haveshop:false,
        products:[],
        checknum:'',
        productId:'',
        totalPrice:0,
        name:'我'
      }
    },
    mounted:function(){

      this.productId = this.$route.query.ids;
      this.name = this.$route.query.name;

      var _this = this;
      var ajaxData = {};
      ajaxData.product_ids = this.productId;
      $.ajax({
        type:'post',
        url: RouteMap.products,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){
            if(res.data.length>0){

              _this.haveshop = true;
              _this.products = res.data;


            }
          }
          else{
            //Toast(res.msg)
          }
        }
      })


      var shareAjaxData = {};
      shareAjaxData.url = window.location.href;

      $.ajax({
        type:'get',
        url: RouteMap.share,
        data:shareAjaxData,
        success:function(res){

          var JSSDK_CONFIG = res;
          wx.config({
            debug: false,
            appId: JSSDK_CONFIG.appId,
            timestamp: JSSDK_CONFIG.timestamp,
            nonceStr: JSSDK_CONFIG.nonceStr,
            signature: JSSDK_CONFIG.signature,
            jsApiList: [
              'checkJsApi',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'onMenuShareQZone',
              'hideMenuItems',
              'showMenuItems',
              'hideAllNonBaseMenuItem',
              'showAllNonBaseMenuItem',
              'translateVoice',
              'startRecord',
              'stopRecord',
              'onVoiceRecordEnd',
              'playVoice',
              'onVoicePlayEnd',
              'pauseVoice',
              'stopVoice',
              'uploadVoice',
              'downloadVoice',
              'chooseImage',
              'previewImage',
              'uploadImage',
              'downloadImage',
              'getNetworkType',
              'openLocation',
              'getLocation',
              'hideOptionMenu',
              'showOptionMenu',
              'closeWindow',
              'scanQRCode',
              'chooseWXPay',
              'openProductSpecificView',
              'addCard',
              'chooseCard',
              'openCard'
            ]
          });

//          var shareLink = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx38e1f36ea2fe8170&redirect_uri='+encodeURIComponent('http://yjfang.duapp.com/shop/'+window.location.hash)+'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
//          var shareLink = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx38e1f36ea2fe8170&redirect_uri=http%3A%2F%2Fyjfang.duapp.com%2Fshop%2F%23%2Fhome&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
//
//          alert(shareLink);
//          alert(shareLink1);
          var shareLink = 'http://yjfang.duapp.com/shop/'+window.location.hash;

          if(window.location.href.indexOf('code') == -1){
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef0a1bb22086dfa1&redirect_uri='+encodeURIComponent('http://yjfang.duapp.com/shop/'+window.location.hash)+'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
            return;
          }

          wx.ready(function(){
            wx.onMenuShareAppMessage({
              title: '女神商城',
              desc: '我的购物车',
              link: shareLink,
              imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
              trigger: function (res) {
//                alert('trigger');
              },
              success: function (res) {
//                alert('success');
              },
              cancel: function (res) {
//                alert('cancel');
              },
              fail: function (res) {
//                alert(JSON.stringify(res));
              }
            });

            wx.onMenuShareTimeline({
              title: '女神商城',
              link: shareLink,
              imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
              trigger: function (res) {
//                alert('trigger');
              },
              success: function (res) {
//                alert('success');
              },
              cancel: function (res) {
//                alert('cancel');
              },
              fail: function (res) {
//                alert(JSON.stringify(res));
              }
            });

          })
        }
      })


      setTimeout(function () {
        _this.getLoginInfo();
      },100)

    },
    methods: {
      redirect:function(url){
        this.$router.push(url);
      },
      getLoginInfo(){

//        localStorage.openid = this.$route.query.openid;

//        alert(1)
        var codeStr = window.location.href.split('?')[1];
        if (codeStr) {
          var codeArr = codeStr.split('=');
          var code = '';
          console.log(codeArr[1]);

          if (codeArr[0] == 'code') {
            if (codeArr[1]) {
              code = codeArr[1].split("&state")[0]
            }
            console.log(code);
            //后续把数据存储到 localstorage 里面，处理刷新页面不发下面请求。tip: 根据code 是否和 localstorage 里面的一样
            if (code != sessionStorage.code) {
//              alert(1)
              sessionStorage.code = code;

              var ajaxData = {};
              ajaxData.code = code;
              //然后发送ajax请求用code 换openid和用户信息，将微信的唯一标示openid存储到localstore里面。
              // 如果是已经绑定的用户则存储用户的信息到localstore
              $.ajax({
                type:'post',
                url: RouteMap.wxopenid,
                data: ajaxData,
                success:function(res){
//                  alert(JSON.stringify(res));
                  if(res.code == 200){
//                    alert(JSON.stringify(res));
                    localStorage.openid = res.data.openid;
                  }
                  else{
                    //Toast(res.msg)
                  }
                }
              })

            }
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .shopping{
    padding-bottom: 6rem;
  }
  .shop-nav{
    text-align: center;
    font-size: .7rem;
    position: relative;
    padding: .5rem;
    border-bottom: 1px solid #c2c2c2;
  }
  .edit {
    position: absolute;
    right: .5rem;
    font-size: .6rem;
  }
  .ico-check{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url("../../assets/me/check.png");
    background-size: 100% 100%;
  }
  .ico-checked{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url("../../assets/me/checked.png");
    background-size: 100% 100%;
  }

  .list-box{

  }
  .list-box .li{
    padding: .5rem;
    font-size: .6rem;
    border-bottom: 1px solid #c2c2c2;
    display:-webkit-box;
    justify-content: space-between;
    color: #707070;
  }
  .list-box .li a{
    color: #707070;
  }
  .list-box .shixiao{
    color: #c2c2c2;
  }
  .list-box .shixiao a{
    color: #c2c2c2;
  }
  .list-box .li .fl-div{
    width: 1.5rem;
  }
  .fl-div span{
    display: inline-block;
    margin-top: 1.4rem;
  }
  .list-box .li .fc-div{
    width: 11rem;
  }
  .list-box .li .fr-div{
    width: 2rem;
    text-align: right;
    padding-top: 1.5rem;

  }
  .list-box .li .left img{ width:3rem }
  .fc-div .img{
    width: 3rem;
  }
  .fc-div .font{
    width: 7.5rem;
    margin-left: .5rem;
    margin-top: .5rem;
  }
  .overdue{
    background: #f5f5f5;
    border-radius: .2rem;
    padding: .1rem .1rem;
    font-size: .5rem;
  }
  .clear-box{
    text-align: center;
    padding-top: .5rem;
  }
  .clear-box .clear{
    display: inline-block;
    background: #f5f5f5;
    color: #707070;
    padding: .2rem .8rem;
    border-radius: .4rem;
  }

  .goddess-rec{
    background: #fff;
    margin-top: .5rem;
    padding-left: .23rem;
    padding-bottom: .5rem;
    color: #707070;
  }
  .goddess-rec .tt{
    text-align: center;
    padding: .5rem 0 .2rem;
  }
  .goddess-rec .tt span{
    display: inline-block;
    background: #ff7b80;
    color: #fff;
    padding: .1rem .3rem;
  }
  .goddess-rec .rec-li{
    float: left;
    width: 7rem;
    margin-left: .5rem;
    margin-top: .5rem;

  }
  .goddess-rec .rec-li .img img{
    width: 100%;
  }
  .goddess-rec a{
    color: #707070;
  }
  .goddess-rec .rec-t{
    padding-top: .2rem;
  }
  .goddess-rec .guanzhu{

  }
  .goddess-rec .shoucang img{
    width: .7rem;
  }
  .goddess-rec .fr{
    padding-right: .2rem;
  }

  .check-buy{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #f5f5f5;
  }
  .buy-box{
    padding: 0 .7rem;
    border: 1px solid #707070;
    height: 2rem;
  }
  .buy-box span{
    display: inline-block;
    vertical-align: middle;
    margin-top: .5rem;
  }
  .buy-box .val{
    color:#b01f24;
    font-size: .7rem;
  }
  .buy-box .buy{
    float: right;
    background: #b01f24;
    color: #fff;
    padding: .2rem .5rem;
    margin-top: .4rem;
    border-radius: .3rem;
    box-shadow: 1px 1px 10px #888888;
  }
  .no-box{
    color: #707070;
    text-align: center;
    margin-top: 6rem;
    font-size: .6rem;
  }
  .btn-box{
    margin-top: .7rem;
  }
  .go-btn{
    border: 1px solid #b01f24;
    border-radius: .7rem;
    color: #b01f24;
    padding: .2rem .7rem;
  }


</style>
